﻿<div class="ui-widget-content">
    <h3>Dialog</h3>
    <p>
        O método dialog do jQuery UI transforma um elemento HTML (normalmente &lt;div&gt;) em uma janela de diálogo.
        Esta &lt;div&gt; já deve existir anteriormente com o seguinte formato (seja diretamente no HTML ou construído dinamicamente pelo jQuery):
    </p>
    <pre>&lt;div id="meu_dialog" title="Título de dialog." style="display: none;"&gt;
    ...
&lt;/div&gt;</pre>

    <p>Tendo-se então o &lt;div&gt; montado, basta chamar o método dialog do jQuery UI. Por exemplo:</p>

    <p>
        <a href="#" id="mostra_janela1">Dialog simples</a>
        <a href="#" id="mostra_janela2">Dialog modal</a>
        <a href="#" id="mostra_janela3">Dialog com algumas configurações</a>
        <a href="#" id="mostra_janela4">Dialog com botões</a>
        <a href="#" id="botao_dialog_animado">Dialog animada</a>
        <a href="#" id="botao_dialog_eventos">Eventos de Dialog</a>
    </p>

    <div id="meu_dialog1" title="Exemplo de dialog." style="display: none;" class="dialog_apresentacao">
        <p>Este é um exemplo de dialog. O código para exibí-lo é:</p>
        <pre>$("#meu_dialog1").dialog();</pre>
    </div>

    <div id="meu_dialog2" title="Exemplo de modal dialog." style="display: none;" class="dialog_apresentacao">
        <p>Este é um exemplo de modal dialog. O código para exibí-lo é:</p>
        <pre>$("#meu_dialog2").dialog({ modal: true });</pre>
    </div>

    <div id="meu_dialog3" title="Exemplo de configurações de dialog." style="display: none;" class="dialog_apresentacao">
        <p>Este é um exemplo de dialog com várias configurações específicas:</p>
        <ul>
            <li><strong>draggable</strong> - Se a dialog pode ser arrastada (por padrão true).</li>
            <li><strong>resizable</strong> - Se a dialog pode ser redimensionada (por padrão true).</li>
            <li><strong>width, height, maxWidth, maxHeight, minWidth e minHeight</strong> - Tamanho da dialog.</li>
            <li><strong>title</strong> - É o título da janela, normalmente obtido pelo elemento "title" da &lt;div&gt;, mas pode ser redefinido com esta propriedade.</li>
        </ul>
        <pre>$("#meu_dialog3").dialog({
    draggable: true,resizable: true, width: 600, height: 400,
    minWidth: 200, maxWidth: 700, minHeight: 150, maxHeight: 400
});</pre>
    </div>

    <div id="meu_dialog4" title="Exemplo de dialog com botões." style="display: none;" class="dialog_apresentacao">
        <p>Este é um exemplo de dialog com 3 botões: "Laranja", "Mamão" e "Pêssego". O código para exibí-lo é:</p>
        <pre>$("#meu_dialog4").dialog({
    buttons: {
        "Laranja": function() { ... },
        "Mamão": function() { ... },
        "Pêssego": function() { ... }
    }
});</pre>
    </div>

    <div id="meu_dialog_animado" title="Exemplo de modal dialog animado." style="display: none;" class="dialog_apresentacao">
        <p>Este é um exemplo de dialog com abertura e fechamento animado:</p>
        <pre>$("#meu_dialog_animado").dialog({ 
   show: "blind",
   hide: "explode"
});</pre>
    </div>

    <div id="meu_dialog_eventos" title="Exemplo de dialog com evento." style="display: none;" class="dialog_apresentacao">
        <p>Este é um exemplo de dialog com abertura e fechamento animado:</p>
        <pre>$("#meu_dialog_animado").dialog({
   autoOpen: true, // Faz a dialog abrir imediatamente.
   open: function(event, ui) { /* Este evento é executado quando a janela abre. */ },
   close: function(event, ui) { /* Este evento é executado quando a janela fecha. */ }
});</pre>
    </div>


    <script type="text/javascript">
        inicializador.windowInit = function() {
            $("#mostra_janela1").button().click(function() {
                $("#meu_dialog1").dialog();
            });
            $("#mostra_janela2").button().click(function() {
                $("#meu_dialog2").dialog({ modal: true });
            });
            $("#mostra_janela3").button().click(function() {
                $("#meu_dialog3").dialog({
                    draggable: true,resizable: true, width: 600, height: 400,
                    minWidth: 200, maxWidth: 700, minHeight: 150, maxHeight: 400
                });
            });
            $("#mostra_janela4").button().click(function() {
                $("#meu_dialog4").dialog({
                    buttons: {
                        "Laranja": function() { $(this).dialog("close"); },
                        "Mamão": function() { $(this).dialog("close"); },
                        "Pêssego": function() { $(this).dialog("close"); }
                    }
                });
            });

            $("#botao_dialog_animado").button().click(function() {
                $("#meu_dialog_animado").dialog({ 
			              show: "blind",
			              hide: "explode"
                });
            });

            $("#botao_dialog_eventos").button().click(function() {
                $("#meu_dialog_eventos").dialog({ 
			              modal: true
                });
            });

        };
    </script>
</div>
